<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        body{
            display:flex;
        }
        #d{
            background-color: antiquewhite;
            width:100px;
            height:100vh;
            position: absolute;
           
        }
        #d>ul{
            width:100px;
            height:100vh;
            
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            text-align: center;
            
        }
        #d>ul>li{
            width:inherit;
            font-size: 28px;
            position: relative;
            display: flex;
            
        } 
        #d>ul>li>ol{
            width:850px;
            background-color: yellow;
            position:absolute;
            left:100px;
            text-align: left;
            display: none;
        }
        #d>ul>li>ol>li{
            font-size: 20px;
        }
        #d>ul>li:hover>ol{
            display: block;
        }
        #kou{
            width:1000px;
            height:100vh;
            background-color: aquamarine;
            
        }
        
    </style>
</head>
<body>
    <div id="d">
        <ul>
            <li >
                手机
                <ol>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ol>
            </li>
            <li>
                冰箱
                <ol>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ol>
            </li>
            <li>
                电脑
                <ol>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ol>
            </li>
            <li>
                洗衣机
                <ol>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                </ol>
            </li>
            <li>
                空调
                <ol>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                </ol>
            </li>
            <li>
                电视机
                <ol>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                </ol>
            </li>
            <li>
                游戏机
                <ol>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                </ol>
            </li>
            <li>
                飞机
                <ol>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                </ol>
            </li>
        </ul>
    </div>
    <div id="kou"></div>
</body>
</html>